<template>
	<div class="page">
		<global-header title="反馈建议" @back="$router.back()" />
		<main class="page-main">
			<div class="tabs">
				<!-- <van-tabs v-model:active="activeTab" @change="onTabChange" type="card">
          <van-tab title="历史记录" name="history"> </van-tab>
          <van-tab title="创建" name="create"> </van-tab>
        </van-tabs> -->
				<custom-tabs v-model:value="activeTab" :options="[
					{ text: '历史记录', value: 'history' },
					{ text: '创建', value: 'create' }
				]" />
			</div>

			<div class="wrap">
				<div class="history-list" v-if="activeTab == 'history'">
					<scroll-list emptyImage enableRefresh v-model:loading="state.loading" v-model:refresh="state.refresh"
						:finished="state.finished" :length="list.length" @refresh="refresh" @load="load">
						<van-cell v-for="(item, index) in list" :key="index" :title="item.Title" :label="formatDate(item.CreatedAt)"
							clickable @click="onHistoryClick(item)">
							<template #right-icon>
								<van-icon name="arrow" class="arraw-icon" />
							</template>
						</van-cell>
					</scroll-list>
				</div>
				<div class="create" v-else>
					<div class="form">
						<div class="form-item">
							<label for="title" class="form-label">
								<span class="required">*</span>
								标题
							</label>
							<br />
							<input id="title" class="form-input" type="text" v-model="form.title"
								placeholder="简要描述您的问题、需求或建议，包含必要的关键词，不超过30个字" maxlength="30" />
						</div>
						<div class="form-item text-area" :class="{ mh: form.imgs.length > 3 }">
							<label for="content" class="form-label">
								<span class="required">*</span>
								反馈内容
							</label>
							<br />
							<textarea id="content" class="form-textarea" v-model="form.content" placeholder="请填写建议内容"></textarea>
							<div class="upload">
								<van-uploader v-model="form.images" :deletable="true" :preview-size="71" :after-read="onAfterRead"
									:max-count="5">
								</van-uploader>
							</div>
						</div>
					</div>
					<van-button class="create-btn" block type="primary" @click="onSubmit" :disabled="loading">确认提交</van-button>
				</div>
			</div>
		</main>
	</div>
</template>

<route>
  {
    name: "admin-main-feedback",
    meta: {
      pageIndex: 4,
    }
  }
</route>

<script setup lang="ts">
import { ref } from "vue";
import { toast } from "@/utils/toast";
import { reqUploadImg } from "@/api/user";
import { reqFeedbackAdd, reqFeedbackList } from "@/api/main";
import { debounce } from "lodash-es";
import { showSuccessToast } from "vant";
import { useList } from "@/hooks/useList";
import { formatDate } from "@/utils/common";

const router = useRouter();

const activeTab = ref("history");
const form = ref({
	title: "",
	content: "",
	images: [] as any[],
	imgs: [] as any[]
});
const loading = ref(false); // 每页大小

const { state, list, refresh, load, search } = useList<any>(reqFeedbackList);

const onTabChange = (value: string) => {
	activeTab.value = value;
};

const onHistoryClick = (item: any) => {
	router.push(`/admin/main/feedback-detail?id=${item.Id}&title=${item.Title}`);
};
const onAfterRead: any = async (file: any) => {
	const isIMAGE = file.file.type === "image/jpeg" || "image/jpg" || "image/png";
	const isLt200K = file.file.size / 1024 < 200;

	if (!isIMAGE) {
		return toast.fail("上传文件只能是图片格式!");
	}
	if (!isLt200K) {
		return toast.fail("发送图片大小不能超过 200KB!");
	}
	const loading = toast.loading("上传中...");
	try {
		let param = new FormData();
		param.append("ImgPath", file.file);
		const res = await reqUploadImg(param);
		form.value.imgs = [...form.value.imgs, res.data.ImgPath];
		file.status = "done";
		loading.close();
	} catch (error) {
		loading.close();
		file.status = "failed";
		console.log(error);
	}
};

const onSubmit = debounce(
	async () => {
		if (!form.value.title.trim()) {
			return showToast("问题不能为空");
		}
		if (!form.value.content.trim()) {
			return showToast("反馈内容不能为空");
		}
		const payload = {
			Content: form.value.content,
			Title: form.value.title,
			Imgs: form.value.imgs.length > 0 ? form.value.imgs.join(",") : null
		};
		try {
			loading.value = true;
			await reqFeedbackAdd(payload);
			loading.value = false;
			showSuccessToast("提交成功");
			setTimeout(() => {
				activeTab.value = "history";
			}, 200);
		} catch (err) {
			loading.value = false;
		}
	},
	500,
	{ leading: true, trailing: false }
);

onMounted(() => {
	search();
});
</script>

<style scoped lang="scss">
.page {
	.tabs {
		padding: 12px 15px;
		background-color: #fff;
	}

	.wrap {
		position: relative;
		height: calc(100% - 70px);
		overflow-y: auto;
	}

	.history-list {
		padding: 10px;

		:deep(.van-cell) {
			border-radius: 8px;
			align-items: center;
			margin-bottom: 10px;
		}
	}

	.create {
		&-btn {
			width: 90%;
			margin: 40px auto 0;
		}

		.form {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 10px;
			background-color: #fff;
		}

		.form-item {
			position: relative;
			background: #f6f9fe;
			padding: 10px;
			padding-left: 0;
			border-radius: 10px;

			.form-input {
				height: 50px;
			}

			&.text-area {
				height: 200px;
			}

			.form-textarea {
				padding-top: 10px;
				height: 80px;
			}

			&.mh {
				height: 280px;
			}
		}

		.form-label {
			padding-left: 10px;
			font-size: 14px;
			margin-bottom: 8px;
			color: rgba(17, 17, 17, 0.3);
		}

		.required {
			color: red;
		}

		.form-input,
		.form-textarea {
			width: calc(100% - 10px);
			padding: 0 0 10px 10px;
			font-size: 14px;
			border: none;
			background: #f6f9fe;
			color: rgba(17, 17, 17, 0.8);

			&::placeholder {
				color: rgba(17, 17, 17, 0.3);
				white-space: pre-wrap;
				/* 自动换行 */
			}
		}

		.upload {
			position: absolute;
			bottom: 10px;
			left: 10px;

			:deep(.van-uploader__wrapper) {
				border-radius: 8px;

				.van-uploader__upload {
					margin: 0;
					background-color: #ffffff;
					border-radius: 8px;
				}

				.van-image {
					border-radius: 8px;
				}
			}
		}
	}
}
</style>
